import * as React from 'react';

// import { RootState, AppDispatch } from '@/app/store';
// import Slider from '../slider/index';
import { useLocation } from 'react-router-dom'
import { useNavigate } from 'react-router-dom';

import './index.module.scss';
import { Dialog } from 'antd-mobile';
import IconHomeActive from './icon/icon-home-active.svg';
import IconHome from './icon/icon-home.svg';
import IconMine from './icon/icon-mine.svg';
import IconMineActive from './icon/icon-mine-active.svg';
import IconOrder from './icon/icon-order.svg';
import IconOrderActive from './icon/icon-order-active.svg';
import IconService from './icon/icon-service.svg';
import IconServiceActive from './icon/icon-service-active.svg';
import { getToken } from '../../utils/localStorge';
const { memo, useMemo, useState, useEffect, useReducer } = React;

interface BottomProps {

}
function Bottom(props: BottomProps) {
	const token = getToken();
	const location = useLocation();
	const [homeStatus, setHomeStatus] = useState(true);
	const [orderStatus, setOrderStatus] = useState(false);
	const [serviceStatus, setServiceStatus] = useState(false);
	const [mineStatus, setMineStatus] = useState(false);
	const navigate = useNavigate();
	const handerclick = (val: any) => {
		// onLogin();
		if (val == location.pathname) {
			return
		} else {
			navigate(val)
		}
	}
	const onLogin = () => {
		if (!token) {
			Dialog.confirm({
				content: '你还没有登录，是否前往登录？',
				onConfirm: async () => {
					navigate('/login');
				},
			})
			return
		}
	}
	useEffect(() => {
		// onLogin();
		if (location.pathname == '/') {
			setHomeStatus(true)
			setOrderStatus(false)
			setServiceStatus(false)
			setMineStatus(false)
		} else if (location.pathname == '/orderList') {
			setHomeStatus(false)
			setOrderStatus(true)
			setServiceStatus(false)
			setMineStatus(false)
		} else if (location.pathname == '/services') {
			setHomeStatus(false)
			setOrderStatus(false)
			setServiceStatus(true)
			setMineStatus(false)
		} else if (location.pathname == '/user') {
			setHomeStatus(false)
			setOrderStatus(false)
			setServiceStatus(false)
			setMineStatus(true)
		}
	}, [location.pathname])

	return (
		<div styleName="bottom-filters">
			<span styleName="item" onClick={() => handerclick('/')}>
				{homeStatus ? <IconHomeActive /> : <IconHome />}
			</span>
			<span
				styleName="item"
				onClick={() => handerclick('/orderList')}
			>
				{orderStatus ? <IconOrderActive /> : <IconOrder />}
			</span>
			<span
				styleName="item"
				onClick={() => handerclick('/services')}
			>
				{serviceStatus ? <IconServiceActive /> : <IconService />}
			</span>
			<span
				styleName="item"
				onClick={() => handerclick('/user')}
			>
				{mineStatus ? <IconMineActive /> : <IconMine />}
			</span>
		</div>
	);
}
export default memo(Bottom);
